// pages/cartCockpit/cartCockpit.js
import * as echarts from '../../ec-canvas/echarts.min';
import {
  lgRequest
} from "../../utils/ajax";
const app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    statusBarHeight: getApp().globalData.statusBarHeight,
    titleBarHeight: getApp().globalData.titleBarHeight,
    sysInfo: getApp().globalData.sysInfo,
    isIphoneX: getApp().globalData.isIphoneX,
    refreshImg: 'https://www.mingchuliangzao.com.cn:8632/profile/upload/2022/07/18/658301884927c25c1367a88defd643e3.png',
    listIcon: 'https://www.mingchuliangzao.com.cn:8632/profile/upload/2022/07/18/145c10a97a299f01b4b1cb09b817eccb.png',
    ec: {
      // 将 lazyLoad 设为 true 后，需要手动初始化图表
      lazyLoad: true
    },
    showCanvas: false,
    mychart: ''
  },
  // 跳转至Text页面
  goText() {
    wx.navigateTo({
      url: '/pages/text/text'
      // pages/cartCockpit/cartCockpit
    })
  },
  getSiteStat() {
    lgRequest('getSiteStat', {}, {
      doSuccess: r => {
        console.log(r,'@@@')
        this.setData({
          SiteStat: r.data
        })

        deviceLv = r.deviceOnlineSum / r.deviceSum * 100
        this.setData({
          deviceLv
        })
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getSiteStat();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    this.ecComponent = this.selectComponent('#mychart-dom-bar');
    this.initType()
  },
  toChange() {
    this.setData({
      showCanvas: !this.data.showCanvas
    })
    if (this.data.showCanvas) {
      this.mychart = this.selectComponent('#mychart');
      this.mychart.init((canvas, width, height, dpr) => {
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr // new
        });
        canvas.setChart(chart);
        var option = {
          radar: {
            indicator: [{
                name: 'Sales',
                max: 6500
              },
              {
                name: 'Administration',
                max: 16000
              },
              {
                name: 'Information Technology',
                max: 30000
              },
              {
                name: 'Customer Support',
                max: 38000
              },
              {
                name: 'Development',
                max: 52000
              },
            ],
            splitArea: {
              areaStyle: {
                color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
                shadowColor: 'rgba(0, 0, 0, 0.2)',
                shadowBlur: 10
              }
            },
          },
          series: [{
            name: 'Budget vs spending',
            type: 'radar',
            data: [{
              value: [4200, 3000, 20000, 35000, 50000, 18000],
              name: 'Allocated Budget'
            }]
          }]
        };
        chart.setOption(option);
        return chart;
      });
    }
  },
  initType() {
    this.ecComponent.init((canvas, width, height, dpr) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // new   //本地开发的时候隐藏 手机上显示
      });
      canvas.setChart(chart);
      var option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          bottom: 0,
          itemWidth: 7,
          itemHeight: 7,
          icon: 'rect',
          data: ['安装', '取电', '核电', '联网', '立杆'],
          textStyle: {
            fontSize: '12px',
            color: '#66FFFF',
          }
        },
        grid: {
          top: '8%',
          left: '3%',
          right: '4%',
          bottom: '13%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisTick: { // X轴线 刻度线 
            show: false,
          },
          axisLabel: { // X轴线 标签修改 
            textStyle: {
              color: '#66FFFF', //坐标值得具体的颜色
              fontSize: '11'
            },
          },
        },
        yAxis: {
          type: 'value',
          axisLabel: { // X轴线 标签修改 
            textStyle: {
              color: '#66FFFF', //坐标值得具体的颜色
              fontSize: '11'
            },
          },
          splitLine: {
            //设置条纹显示 柱状图默认yAxis(true)
            show: true,
            //设置lineStyle即可写入样式即可
            lineStyle: {
              //这里输入线条的样式
              color: '#E5E5E530',
            }
          },
        },
        series: [{
            name: '安装',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210],
            symbolSize: 8,
          },
          {
            name: '取电',
            type: 'line',
            stack: 'Total',
            data: [220, 182, 191, 234, 290, 330, 310],
            symbolSize: 8,
          },
          {
            name: '核电',
            type: 'line',
            stack: 'Total',
            data: [150, 232, 201, 154, 190, 330, 410],
            symbolSize: 8,
          },
          {
            name: '联网',
            type: 'line',
            stack: 'Total',
            data: [320, 332, 301, 334, 390, 330, 320],
            symbolSize: 8,
          },
          {
            name: '立杆',
            type: 'line',
            stack: 'Total',
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            symbolSize: 8,
          }
        ]
      };
      chart.setOption(option);
      return chart;
    });
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})